<div ms-controller="chat" class="chat-box">

    <div class="chat-ctrl ">
        <div class="container">
            <div class="row">
                <!--发送控制台-->
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="chat-content send-bob smooth" ms-class="send-bob-focus:isFocus"
                         ms-on-mouseover="onHover" ms-on-mouseleave="outHover">
                        <div ms-controller="emo">
                            <div ms-widget="tEmoticon,tEmoticon,$optEmo"></div>

                        </div>
                        <script>
                            avalon.ready(function(){
                                require(['../../ui/tEmoticon/tEmoticon.js'],function(){
                                    var emo=avalon.define({
                                        $id:"emo",
                                        //插入表情的配置
                                        $optEmo:{
                                            tgInput:"msg",
                                        }
                                    })
                                    avalon.scan();
                                })
                            })

                        </script>

                        <input id="msg" type="text" class="chat-input"
                               ms-duplex="msg"  ms-on-keyup="hotKey" ms-on-focus="onFocus" ms-on-blur="outFocus">
                        <a class="icon-share-alt icon-2x smooth" ms-click="send(msg)"></a>
                        <br/>
                    </div>

                    <div class="ang-right"></div>

                </div>

                <div class="col-sm-2 hidden-xs">

                    <div class="">
                        <button class="btn btn-primary" ms-click="login" ms-if="inSide===false">登录</button>
                        <span class="user-name" ms-if="inSide===true">{{user.UserName}}</span>
                        <br/><br/>
                        <span class="time">{{contant}}</span>

                        &nbsp;
                        <a class="sign-out time" ms-click="logout" ms-if="inSide===true">
                            <i class="icon-signout"></i>
                        </a>
                        &nbsp;
                        <a class="sign-out time" onclick="window.location.reload()" ms-if='contant=="掉线"' >
                            重新连接
                        </a>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <span style="position: fixed;bottom: 10px;right: 10px">&copy; <a href="http://tansuyun.cn">碳素云</a> 2015</span>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="container">
        <div class="row">
            <div class="col-sm-10">
                <!--聊天条目列表-->
                <div class="chat-list" id="chatList">
                    <div ms-repeat="list" class="clearfix chat-item">
                        <div class="">
                            <span class="user-name">{{el.Name}}</span>
                            <span class="time">{{el.Time|date("yyyy 年 MM 月 dd 日 HH:mm:ss")}}</span>
                        </div>
                        <div class="ang"></div>
                        <div class="chat-content pull-left" ms-class="chat-{{$index}}">
                            {{el.Content}}
                        </div>
                    </div>
                </div>
            </div>


            <div class="col-sm-2">
                <div ms-include-src="side"></div>
            </div>
        </div>
    </div>

    <!--提示消息播放器-->
    <!--<audio style="display: none" id="tipAudio">-->
        <!--<source ms-attr-src="chat-tip" type="audio/ogg" >-->
        <!--您的浏览器不支持 audio 元素。-->
    <!--</audio>-->


</div>

